<template>
  <swiper :options="swiperOption" ref="swiperModule" v-if="showSwiper" >
    <!-- slides -->
    <swiper-slide v-for="v in list" :key="v.id">
      <img class="swiper-img" :src="v.image_small" alt="" @click="link(v.url)">

    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>

</template>
<script>
  export default {
    name: '',
    props: {
      list: Array,
      nid: Number
    },
    data() {
      return {
        swiperOption: {
          slidesPerView: 1,
          loop: true,
          preventClicks: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true

          },

        },
      }
    },
    methods: {
      /*匹配PC端路由跳转*/
      link(url) {
        console.log(url)
        const article = RegExp(/info/)
        const test = RegExp(/ceshi/)
        const fm = RegExp(/fm/)
        let id = url.replace(/[^0-9]/ig, "")
        // console.log(id)
        if (article.test(url)) {
          this.$router.push({path: '/article/' + id + ''})
        } else if (test.test(url)) {
          this.$router.push({path: '/testRule/' + id + ''})

        } else if (fm.test(url)) {
          console.log("fm")
        } else {
          console.log("路径不")
        }
        // this.$router.push({path:url})

      },
      call1(){
        console.log(1)
      }
    },
    computed: {
      showSwiper() {
        return this.list.length || {}
      },
      swiper(){
        return this.$refs.swiperModule.swiper
      }
    },
    nextTick(){
      console.log(1)
    },
    activated() {

      this.swiper.slideTo(0, 1, false)
      // console.log(this.Swiper)
    }

  }
</script>

<style scoped>
  .swiper-slide img {
    width: 100%;
    height: 300px;
  }

  .swiper-pagination >>> .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: white;
    opacity: 0.6;
    margin: 0 8px;

  }

  .swiper-pagination >>> .swiper-pagination-bullet-active {
    background-color: white;
    opacity: 1;
  }
</style>
